<div class="gutterVMd2">
  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHCent">
      <h2 class="h3 clrT"><%= ob.polyT('settings.moderationTab.sectionName') %></h2>
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph modalContentCornerBtn js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
    <hr class="clrBr" />
    <h3><%= ob.polyT('settings.moderationTab.disputeResolution') %></h3>
    <p class="tx5 clrT2"><%= ob.polyT('settings.moderationTab.disputeResolutionText') %></p>

    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <span class="required"><%= ob.polyT('settings.moderationTab.moderationStatus') %></span>
          </div>
          <div class="col9">
            <div class="btnStrip">
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="moderator"
                       value="true"
                       id="settingsModerationStatusTrue"
                       data-var-type="boolean"
                <% if (ob.isModerator) { %>checked<% } %>>
                <label for="settingsModerationStatusTrue"><%= ob.polyT('settings.on') %></label>
              </div>
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="moderator"
                       value="false"
                       id="settingsModerationStatusFalse"
                       data-var-type="boolean"
                <% if (!ob.isModerator) { %>checked<% } %>>
                <label for="settingsModerationStatusFalse"><%= ob.polyT('settings.off') %></label>
              </div>
            </div>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label class="required" for="moderationFeeType"><%= ob.polyT('settings.moderationTab.feeTypeAmount') %></label>
          </div>
          <div class="col9">
            <%
              const feeErrors = Object.keys(ob.errors)
                .filter(errKey => errKey.startsWith('moderatorInfo.fee.'))
                .map(errKey => ob.errors[errKey])
              if (feeErrors.length) {
                print(ob.formErrorTmpl({ errors: feeErrors }));
              }
            %>
            <div class="flexRow gutterH rowTn">
              <div class="col4">
                <select id="moderationFeeType" name="moderatorInfo.fee.feeType" class="clrBr clrP clrSh2">
                  <option value="<%= ob.feeTypes.PERCENTAGE %>" <% if (!ob.fee || (ob.fee && ob.fee.feeType === ob.feeTypes.PERCENTAGE)) print('selected') %>>
                    <%= ob.polyT('settings.moderationTab.percentage') %>
                  </option>
                  <option value="<%= ob.feeTypes.FIXED %>" <% if (ob.fee && ob.fee.feeType === ob.feeTypes.FIXED) print('selected') %>>
                    <%= ob.polyT('settings.moderationTab.fixed') %>
                  </option>
                  <option value="<%= ob.feeTypes.FIXED_PLUS_PERCENTAGE %>" <% if (ob.fee && ob.fee.feeType === ob.feeTypes.FIXED_PLUS_PERCENTAGE) print('selected') %>>
                    <%= ob.polyT('settings.moderationTab.fixedPlusPercentage') %>
                  </option>
                </select>
              </div>
              <div class="col2 js-feeFixedInput <% if (!ob.fee || (ob.fee && ob.fee.feeType === ob.feeTypes.PERCENTAGE)) { print('visuallyHidden') } %>">
                <%
                  const amt = ob.fee && ob.fee.fixedFee ?
                    ob.number.toStandardNotation(ob.fee.fixedFee.amount) : '';
                  const ccode =
                    ob.fee &&
                    ob.fee.fixedFee &&
                    ob.fee.fixedFee.currencyCode ?
                      ob.fee.fixedFee.currencyCode : ob.defaultCurrency;
                %>
                <input type="text"
                       class="noSpin clrBr clrSh2"
                       name="moderatorInfo.fee.fixedFee.amount"
                       data-var-type="bignumber"
                       placeholder="0.00"
                       value="<%= amt %>">
              </div>
              <div class="col4 js-feeFixedInput <% if (!ob.fee || (ob.fee && ob.fee.feeType === ob.feeTypes.PERCENTAGE)) { print('visuallyHidden') } %>">
                <select  id="moderationCurrency" name="moderatorInfo.fee.fixedFee.currencyCode" class="clrBr clrP clrSh2" style="width: 100%">
                  <% ob.currencyList.forEach((currency) => { %>
                  <option value="<%= currency.code %>" <% if (currency.code === ccode) print('selected') %>><%= currency.nameWithCode %></option>
                  <% }); %>
                </select>
              </div>
              <div class="col2 js-feePercentageInput <% if (ob.fee && ob.fee.feeType === 'FIXED') { print('visuallyHidden') } %>">
                <div class="inputPercentWrapper clrBr clrSh2">
                  <input type="text"
                         maxlength="5"
                         name="moderatorInfo.fee.percentage"
                         value="<%= ob.fee.percentage %>"
                         placeholder="0"
                         data-var-type="number">
                </div>
              </div>
            </div>
            <div class="tx6 txPlaceholder">
              <%= ob.polyT('settings.moderationTab.feeTypeHelper') %>
            </div>
          </div>

        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsModeratorDescription" class="required"><%= ob.polyT('settings.moderationTab.description') %></label>
          </div>
          <div class="col9">
            <% if (ob.errors['moderatorInfo.description']) print(ob.formErrorTmpl({ errors: ob.errors['moderatorInfo.description'] })) %>
            <textarea rows="3" maxlength="<%= ob.max.description %>" name="moderatorInfo.description" id="settingsModeratorDescription"
                      class="clrBr clrSh2" placeholder="<%= ob.polyT('settings.moderationTab.descriptionHelper') %>"><%= ob.description %></textarea>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsModeratorTerms" class="required"><%= ob.polyT('settings.moderationTab.terms') %></label>
          </div>
          <div class="col9">
            <% if (ob.errors['moderatorInfo.termsAndConditions']) print(ob.formErrorTmpl({ errors: ob.errors['moderatorInfo.termsAndConditions'] })) %>
            <textarea rows="3" maxlength="<%= ob.max.terms %>" name="moderatorInfo.termsAndConditions" id="settingsModeratorTerms"
                      class="resizable clrBr clrSh2" placeholder="<%= ob.polyT('settings.moderationTab.termsHelper') %>"><%= ob.termsAndConditions %></textarea>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsModeratorTerms" class="required"><%= ob.polyT('settings.moderationTab.languages') %></label>
          </div>
          <div class="col9">
            <% if (ob.errors['moderatorInfo.languages']) print(ob.formErrorTmpl({ errors: ob.errors['moderatorInfo.languages'] })) %>
            <select id="moderationLanguageSelect" multiple name="moderatorInfo.languages" class="clrBr clrP clrSh2"></select>
            <div class="tx6 txPlaceholder">
              <%= ob.polyT('settings.moderationTab.languagesHelper') %>
            </div>
          </div>
        </div>
      </form>
      <!-- the elements below are not part of the data being saved to the server -->
      <div class="box padMd">
        <div class="flexRow gutterH">
          <div class="col3"></div>
          <div class="col9">
            <ul class="unstyled errorList hide js-moderationConfirmError">
              <li><i class="ion-alert-circled"></i> <%= ob.polyT('settings.moderationTab.errors.confirm') %></li>
            </ul>
            <input type="checkbox" id="acceptGuidelines" <% if (ob.isModerator) { print('checked') } %>>
            <label class="tx5b" for="acceptGuidelines">
              <span>
                <%= ob.polyT('settings.moderationTab.acceptGuidelines', { acceptGuidelinesLink: `<a href="https://www.openbazaar.org/openbazaar-dispute-resolution-guidelines/" class="clrTEm">${ob.polyT('settings.moderationTab.acceptGuidelinesLink')}</a>` }) %>
              </span>
            </label>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3"></div>
          <div class="col9">
            <input type="checkbox" id="understandRequirements" <% if (ob.isModerator) print('checked') %>>
            <label class="tx5b" for="understandRequirements">
              <span><%= ob.polyT('settings.moderationTab.understandRequirements') %></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHRight">
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
  </div>
</div>
